<template>
  <div class="app-container mt-5">
    <el-row :gutter="10">
      <el-col
        v-for="(item,index) in appList"
        :key="index"
        :xs="24"
        :sm="12"
        :md="8"
        :lg="8"
        :xl="8"
      >
        <el-card>
          <div class=" flex flex-col justify-center">
            <img
              style="width: 80px; height: 80px;margin: 20px auto"
              :src="item.iconUrl"
              fit="fit"
            >
            <div class="text-center">{{ item.appName }}</div>
            <div class="text-center">{{ item.type }}</div>
            <div class="text-center text-green-500 mt-10">{{ item.name }}</div>
            <div class="text-center text-gray-500 text-xs mb-5">{{ formatDate(item.updateDate) }}</div>
            <div class="text-center text-gray-500 text-xs mb-5">{{ $t('version') }}:{{ item.version }}</div>
            <el-button type="primary" icon="el-icon-download" @click="download(item)">{{ $t('download') }}</el-button>
            <div class="text-center text-gray-500 text-xs mt-5">{{ item.remark }}</div>
            <div
              :ref="item.type"
              style="width:100px;height: 100px;margin: 15px auto"
            />
            <div class="mb-2">{{ $t('history') + $t('version') }}</div>
            <el-timeline>
              <el-timeline-item
                v-for="(history,historyIndex) in item.historyList"
                :key="historyIndex"
                :timestamp="formatDate(history.updateDate)"
              >
                {{ history.version }}
                <div class="el-icon-download" style="float: right" @click="download(item)" />
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getNewestAppPackage, listAppPackage } from '@/api/app/appPackageApi'
import { formatDate } from '@/util/common'
import QRCode from 'qrcodejs2'

export default {
  name: 'Download',
  data() {
    return {
      appList: []
    }
  }, created() {
    const param = this.$route.query
    this.appKey = param.appKey
    this.getNewestAppPackage('android')
  }, methods: {
    download(item) {
      window.open(
        item.downloadPath
      )
    },
    formatDate(time) {
      return formatDate(this, time)
    },
    getNewestAppPackage(type) {
      getNewestAppPackage({
        appKey: this.appKey,
        type: type
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          data.historyList = []
          this.appList.push(data)
          this.$nextTick(() => {
            this.listAppPackage(data.appId, type)
            new QRCode(this.$refs[data.type][0], {
              text: data.downloadPath,
              width: 100,
              height: 100,
              colorDark: '#333333', // 二维码颜色
              colorLight: '#ffffff', // 二维码背景色
              correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
            })
          })
        }
      })
    },
    listAppPackage(appId, type) {
      listAppPackage({
        appId: appId,
        type: type
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.appList.forEach(app => {
            data.forEach(item => {
              if (app.type === item.type) {
                app.historyList.push(item)
              }
            })
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
